<template>
  <div class="category-list">
    <van-tabs v-model="activeTab" @click="handleTabClick">
      <van-tab
        v-for="item in navData"
        :title="item.name"
        :key="item.id"
        :name="item.id"
      >
      </van-tab>
    </van-tabs>
    <div class="main">
      <div class="main-head">
        <p class="name">{{ currentNav.name }}</p>
        <p class="desc">{{ currentNav.front_desc }}</p>
      </div>
      <div class="list" v-if="goods.length">
        <router-link
          tag="div"
          class="item"
          v-for="item in goods"
          :key="item.id"
          :to="`/goods/goodsdetail?id=${item.id}`"
        >
          <img :src="item.list_pic_url" alt="" />
          <p class="name">{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </router-link>
      </div>
      <div class="empty" v-else>
        <van-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>
<script>
import { categoryNav, goodsList } from "@/api/category/categorylist";
export default {
  data() {
    return {
      activeTab: 0, // 当前被选中的nav tab
      currentNav: {}, // 当前被选中的nav tab 信息
      navData: [], // 顶部tabs 列表
      goods: [], // 商品类别
    };
  },
  methods: {
    async init() {
      const id = this.$route.query.id;
      // 给tabs设置默认选中, id必须转成number类型,否则设置会出现无效bug
      this.activeTab = Number(id);
      // 获取顶部导航
      const { navData } = await categoryNav({
        id,
      });
      this.navData = navData;
      this.getGoodsList(id);
    },
    // 获取商品列表
    async getGoodsList(id) {
      const { data, currentNav } = await goodsList({
        categoryId: id,
      });
      this.currentNav = currentNav;
      this.goods = data;
    },
    // tab点击事件
    handleTabClick(name) {
      this.getGoodsList(name);
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
